<?php

?>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>客户端列表</title>
    
    <style>
        #container{
            margin: 0 auto;
            background-color: #cccccc;
            width: 600px;
            height: 500px;
            position:relative;
        
        }
        #optArea{
            width:300px;
            height:35px;
            margin: auto;  
            position: absolute;  
            top: 0; left: 0; bottom: 0; right: 0;       
        }
    </style>
</head>
<body onload="onBodyLoad()">
    <div id="container">
        <div id="optArea">
            <span>客户端列表：</span>
            <select name="" id="clist">                
            </select>
            <button onclick="gotoWeb()">前往</button>
        </div>
        
    </div>    
</body>
<script>    
    configs = [
        {"name":"周宏辉",url:"http://192.168.32.7:8080"},
        {"name":"石头",url:"baidu"},
        {"name":"博皇",url:"yahu"},
    ]

    function $(id){
        var ele = document.getElementById(id);
        return ele;
    }

    function onBodyLoad(){
        var cl = $('clist');
        console.log("hello world! 11",cl);    
        var len = configs.length;
        var opts = [];
        for (let index = 0; index < len; index++) {
            const element = configs[index];
            var opt = new Option(element.name,element.url,index==0);
            cl.options[index] = opt;
        }    
    }
    function gotoWeb(){
        var cl = $('clist');    
        var opt = cl.selectedOptions[0];    
        //window.location.href = opt.value;
        window.open(opt.value,'_blank'); //新窗口
        
    }
</script>
</html>